import Header from '@/components/header';
import styles from "./index.module.scss";
import { ReactSVG } from 'react-svg';
import arrow_right_fill from "@/assets/images/arrow_right_fill.svg";
import voiceGenerationCover from "@/assets/images/home/voiceGenerationCover.svg";
import voiceGenerationIcon from "@/assets/images/home/voiceGenerationIcon.svg";
import wenshengFilmImgCover from "@/assets/images/home/wenshengFilmImgCover.svg";
import wenshengFilmImgIcon from "@/assets/images/home/wenshengFilmImgIcon.svg";
import videoPostCover from "@/assets/images/home/videoPostCover.svg";
import videoPostIcon from "@/assets/images/home/videoPostIcon.svg";
import actualSoundCover from "@/assets/images/home/actualSoundCover.svg";
import actualSoundIcon from "@/assets/images/home/actualSoundIcon.svg";
import elementGenerationCover from "@/assets/images/home/elementGenerationCover.svg";
import elementGenerationIcon from "@/assets/images/home/elementGenerationIcon.svg";
import { useNavigate } from 'react-router-dom';

export default function HomePage() {
  const navigate = useNavigate();
  return (
    <div className={styles.homePage}>
      <Header showLogo={true} cursor={false}/>
      <div className={styles.mainSection}>
        <div className={styles.mainContent}>
          <div className={styles.subSection}>
            <div className={styles.title}>国产化AIGC影视工作平台</div>
            <div className={styles.text}>融合国产AI技术，赋能影视创作全流程</div>
            <div className={styles.startButton} onClick={()=>{navigate('/imageEdit');}}>开始创作<ReactSVG className={styles.svg} src={arrow_right_fill}/></div>
          </div>
          <div className={styles.cardContainer}>
            <div className={styles.largecardSection} onClick={()=>{navigate('/imageEdit');}}>
              <ReactSVG className={styles.svg} src={voiceGenerationCover}/>
              <div className={styles.cardTextContainer}>
                <div className={styles.title}>
                  <ReactSVG className={styles.svg} src={voiceGenerationIcon}/>
                  <div>电影对白可控语音生成</div>
                </div>
                <div className={styles.text}>使用先进AI技术，生成自然、富有情感的电影对白语音</div>
              </div>
            </div>
            <div className={styles.smallContainer}>
              <div className={`${styles.smallCardSection} ${styles.smallCardSectionWOne} ${styles.smallCardSectionHOne}`}  onClick={()=>{navigate('/textToVideo');}}>
                <ReactSVG className={styles.svg} src={wenshengFilmImgCover}/>
                <div className={styles.cardTextContainer}>
                  <div className={styles.title}>
                    <ReactSVG className={styles.svg} src={wenshengFilmImgIcon}/>
                    <div>文生电影工作流</div>
                  </div>
                  <div className={styles.text}>从文本到视觉，自动化创建电影场景和序列</div>
                </div>
              </div>
              <div className={`${styles.smallCardSection} ${styles.smallCardSectionWOne} ${styles.smallCardSectionHTwo}`} onClick={()=>{navigate('/videoEditTest');}}>
                <ReactSVG className={styles.svg} src={videoPostCover}/>
                <div className={styles.cardTextContainer}>
                  <div className={styles.title}>
                    <ReactSVG className={styles.svg} src={videoPostIcon}/>
                    <div>影视后期ROTO&擦除</div>
                  </div>
                  <div className={styles.text}>精确物体追踪与移除，简化后期制作流程</div>
                </div>
              </div>
            </div>
            <div className={styles.smallContainer}>
              <div className={`${styles.smallCardSection} ${styles.smallCardSectionWTwo} ${styles.smallCardSectionHOne}`} onClick={()=>{navigate('/controlSpeechSynthesis');}}>
                <ReactSVG className={styles.svg} src={actualSoundCover}/>
                <div className={styles.cardTextContainer}>
                  <div className={styles.title}>
                    <ReactSVG className={styles.svg} src={actualSoundIcon}/>
                    <div>同期声智能制作</div>
                  </div>
                  <div className={styles.text}>智能识别并优化场景同期声，提升音频质量</div>
                </div>
              </div>
              <div className={`${styles.smallCardSection} ${styles.smallCardSectionWTwo} ${styles.smallCardSectionHTwo}`} onClick={()=>{navigate('/imageEdit');}}>
                <ReactSVG className={styles.svg} src={elementGenerationCover}/>
                <div className={styles.cardTextContainer}>
                  <div className={styles.title}>
                    <ReactSVG className={styles.svg} src={elementGenerationIcon}/>
                    <div>数字绘景元素生成与合成</div>
                  </div>
                  <div className={styles.text}>AI辅助视觉创建数字场景与特效元素</div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}
